<template>
  <div class="BuySure">
    <p class="message">东亚联丰环球债券</p>
    <group>
      <cell :title="item.item" :value="item.val" class="cell" v-for="(item,index) in returnMes" :key="index"></cell>
    </group>
    <group title="" class="check">
      <x-input title="赎回份额" class="cell check-code" placeholder="请输入赎回份额" label-width="1.8rem">
      </x-input>
      <x-input title="短信验证码" class="cell weui-vcode check-code" placeholder="请输入短信验证码" label-width="1.8rem" v-if="unBinded">
        <x-button slot="right" class="check-button">发送验证码</x-button>
      </x-input>
    </group>
    <x-button @click.native="sureToFedeem" plain type="primary" class="sure">确认购买</x-button>
  </div>

</template>

<script>
/* eslint-disable key-spacing,comma-dangle */

export default{
  data () {
    return {
      unBinded:true, // 未绑定
      returnMes : [
        {item : '产品类型', val : ''},
        {item : '币种', val : ''},
        {item : '总份额', val : ''},
        {item : '可用份额', val : ''},
        {item : '最低持有股份', val : ''},
        {item : '单笔最大赎回份额', val : ''},
      ]
    }
  },
  methods:{
    getData () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'fedeemMobil', 'user_Data': {'productId': '5015'}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.unBinded = response.data.data[0].unBinded
            _this.returnMes = response.data.data[0].returnMes
          } else {
            console.log('fail')
          }
        })
    },
    sureToFedeem () {
      if (this.unBinded) {
        this.unBinded = false
      } else {
        this.$router.push({name: 'FinancialRedeemResult'})
      }
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style scoped lang="less">
  .BuySure{
    width: 100%;
    height: 13.34rem;
    background: #f7f8fa;
    .message{
      height:1rem;
      font-size:0.3rem;
      line-height: 1rem;
      padding-left: 0.3rem;
      font-weight: bold;
      color: #333;
    }
    .check{
      margin-top: .2rem;
    }
    .cellContainer{
      margin:0;
    }
    .cell{
      font-size: 0.26rem;
      padding: 0px 0.29rem 0px 0.31rem;
      color: #333;
    }
    .sure{
      line-height:0.88rem;
      width:6.9rem;
      margin-left: 0.3rem;
      margin-top: 0.49rem;
      background: #EC1B30;
      font-size: 0.3rem;
      border-radius: 0.06rem;
      color: white;
    }
  }
.check-code{
  height: .88rem;
}
.check-button{
  height: .6rem;
  line-height: .6rem;
  width: 1.76rem;
  background-color: #ffffff;
  color: #3333FF;
  font-size: 0.28rem;
}
.check-button:after,.check-button:after{
  border-color: transparent transparent transparent #EAEAEA;
}
</style>
<style>
div.vux-no-group-title {
  margin-top: 0;
}
</style>
